// 课堂练习

window.addEventListener('load', function () {
    // 获取元素
    // 左箭头
    var arrow_l = document.querySelector('.arrow-l');
    // 右边箭头
    var arrow_r = document.querySelector('.arrow-r');
    // 主图大盒子
    var focus = document.querySelector('.focus');
    // 图片的宽度
    var focusWidth = focus.offsetWidth;

    // 2. 鼠标经过focus 就显示隐藏左右箭头
    focus.addEventListener('mouseenter', function () {
        arrow_l.style.display = 'block'
        arrow_r.style.display = 'block'
        // 当鼠标放上去的时候就不定时动了
        clearInterval(timer);
        timer = null;
    })
    // 鼠标离开主图的时候，隐藏左右箭头
    focus.addEventListener('mouseleave', function () {
        arrow_l.style.display = 'none'
        arrow_r.style.display = 'none'
        timer = setInterval(function () {
            arrow_r.click()
        }, 2000);

    })

    // 3. 动态生成小圆圈  有几张图片，我就生成几个小圆圈(轮播图的图片数量不一定，动态生成小圆点比较好)
    // 获取ul ol  使用委托 这里一定是focus里面的ul，否则会获取到整体的ul
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.circle');
    // 循环ul里面的所有li来创建ol里面的li添加到ol里面去
    for (var i = 0; i < ul.children.length; i++) {


        var li = document.createElement('li');
        // 在ul循环里面给ul的每个Li自定义索引，用于获取ol的li
        li.setAttribute('index', i);

        ol.appendChild(li)


        // 排他思想，灭掉其他人留下我自己
        // ul孩子的数量等于Ol孩子的数量，所以可以在ul循环里面给ol添加点击事件
        // 点击哪个小圆圈，那个小圆圈就会变色
        li.addEventListener('click', function () {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';

            }
            this.className = 'current';
            // 5. 点击小圆圈，移动图片 当然移动的是 ul
            // ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值
            // 当我们点击了某个小li 就拿到当前小li 的索引号
            // 得到当前li的索引号
            var index = this.getAttribute('index');
            
            num = circle = index;
            // 图片的宽度
            // var focusWidth = focus.offsetWidth;
            // 这里移动的是ul,调用动画函数
            animate(ul, -index * focusWidth)
        })

    }
    // 给第一个ol里面的Li添加类名
    ol.children[0].className = 'current'

    // 6. 克隆第一张图片(li)放到ul 最后面,这里的顺序很重要
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    // 7. 点击右侧按钮， 图片滚动一张
    // 声明一个变量，控制小圆点索引
    var circle = 0;
    // 声明一个变量Num 作为右箭头点击的索引
    var num = 0;
    arrow_r.addEventListener('click', function () {
        if (num == ul.children.length - 1) {
            ul.style.left = 0;
            num = 0;
        }
        num++;
        animate(ul, -num * focusWidth);
    })
    circle++;
    if (circle == ol.children.length) {
        circle = 0;

        circleChange();
    }





    // 封装小圆点的排他函数
    function circleChange() {
        for (var i = 0; i < ol.children.length; i++) {
            // 先清除其余小圆圈的current类名
            ol.children[i].className = '';
        }

        // 留下当前的小圆圈的current类名
        ol.children[circle].className = 'current';
    }

    var timer = setInterval(function () {
        arrow_r.click()
    }, 2000);


})

